<script setup>
import { ref, reactive, onBeforeMount } from 'vue'
import request from '@/utils/request'

const formSize = ref('default')
const userFormRef = ref()
let userForm = reactive({
    username: '',
    className: '',
    sex: '',
    email: '',
    birthday: ''
})

let current_username = localStorage.getItem("username");

const rules = reactive({
    name: [
        { message: '请输入用户昵称', trigger: 'blur', message: '请输入用户昵称' },
        { min: 3, max: 5, trigger: 'blur' },
    ],
    class_name: [
        { message: '请输入班级', trigger: 'blur' },
        { min: 3, max: 5, trigger: 'blur' },
    ],
    sex: [
        {
            message: '',
            trigger: 'change',
        },
    ],
    email: [
        {
            // required: true,
            message: '请输入个人邮箱',
            trigger: 'change',
        },
    ],
    birthday: [
        {
            message: '',
            trigger: 'change'
        }
    ]
})

onBeforeMount(async () => {
    let userInfoTable = await request.get("/user/" + current_username);
    let userObject = userInfoTable[0];
    // Reflect.defineProperty(userObject, "password");   //删除js对象的属性（方法一）
    delete userObject.password;                          //删除js对象的属性（方法二）
    console.log(userObject);
    userForm = userObject;
});

const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            //修改用户个人信息
            let submit_user_formData = JSON.parse(JSON.stringify(userForm.value));
            request.post('')

        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}



</script>

<template>
    <el-card style="margin: 11%;">
        <el-form ref="userFormRef" :model="userForm" :rules="rules" label-width="220px" class="demo-userForm"
            style="padding-top: 2%;" :size="formSize" status-icon>
            <el-form-item label="用户昵称" prop="username">
                <el-input v-model="userForm.username" placeholder="请输入用户昵称" />
            </el-form-item>
            <el-form-item label="班级" prop="className">
                <el-input v-model="userForm.className" placeholder="请输入班级" />
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-select v-model="userForm.sex" placeholder="">
                    <el-option label="男" value="boy" />
                    <el-option label="女" value="girl" />
                </el-select>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="userForm.email" placeholder="请输入邮箱" />
            </el-form-item>
            <el-form-item label="生日" prop="birthday">
                <el-date-picker v-model="userForm.birthday" type="date" placeholder="时间选择器"
                    :default-value="new Date(2000, 1, 1)" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm(userFormRef)" size="large">修改个人信息</el-button>
                <el-button @click="resetForm(userFormRef)" size="large">重置表单输入内容</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<style lang='scss' scoped></style>